<!-- <script> {{{ -->
<script setup lang="ts">
import {nextTick, ref, type VNodeRef} from 'vue'
import {useRouter, useRoute} from 'vue-router'

import {format as timeFormat} from 'silly-datetime'


const props = defineProps(['subarea'])

</script>
<!-- }}} -->

<template>
    <div v-if='$DEV' class="dev-tag">subareaCard1</div>
    <div class="subarea-block card-block">
        <div v-if="subarea">
            <div class="subarea-title">
                {{ subarea.name}}
            </div>
            <div class="subarea-data fhs">
                <div class="label1">
                    主题
                </div>
                <div class="topic-num">
                    {{ subarea.topic_num}}
                </div>
                <div class="label2">
                    帖子
                </div>
                <div class="post-num">
                    {{ subarea.post_num}}
                </div>
            </div>
            <div class="subarea-intro">
                {{ subarea.description}}
            </div>
        </div>
        <el-skeleton v-else :rows="3" animated />
    </div>
</template>

<style scoped lang="scss">
.rhs-affix-area {
    order: 1;
    flex-basis: 200px;
    min-width: 240px;
}

.subarea-block {
    background-color: white;
    padding: 16px 16px 20px;
    margin-bottom: 4px;

    .subarea-title {
        font-size: 20px;
        color: #333333;
        font-weight: bold;
        margin-bottom: 4px;
    }

    .subarea-data {
        font-size: 14px;
        color: #999999;
        margin-bottom: 12px;

        .label1,
        .label2 {
            margin-right: 4px;
        }

        .topic-num {
            margin-right: 12px;
        }
    }

    .subarea-intro {
        font-size: 14px;
        color: #666666;
        line-height: 24px;
    }
}
</style>
